<template>
	<Layout>
		<template #title>财务管理</template>
		<view class="iflex column asc finance-card">
			<image class="finance-card-bg" src="/static/image/other/finance-card.bg.png"></image>
			<view class="iflex aic fill finance-card__header">
				总收益(元)
			</view>
			<view class="iflex aic fill finance-card__total-revenue">
				{{pennyToDollarFormat(wallet.walletIncome,true)}}
			</view>
			<view class="iflex aic fill finance-card__footer">
				今日入账：+{{pennyToDollarFormat(brokerageInfo.todayAmount,true)}}
			</view>
		</view>

		<section-title top="50rpx" bottom="30rpx"><template #title>全部收益</template></section-title>

		<view class="flex">
			<view class="scroll-wrap">
				<scroll-refresher @refresh="refresh" @tolower="tolower">
					<view class="iflex column aic fill">
						<view v-for="item of list " :key="item.id" class="iflex revenue-record">
							<image class="revenue-record__image" :src="item.bizPicture"></image>
							<view class="iflex column jcsb revenue-record__info">
								<view class="ellipsis">{{item.title}}</view>
								<text>{{dateTimeFormat(item.createTime)}}</text>
							</view>
							<view class="iflex revenue-record__money">+{{pennyToDollarFormat(item.totalAmount)}}
							</view>
						</view>
					</view>
				</scroll-refresher>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import type { AnyObj } from '@/types/global';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { getBrokerageInfo } from '@/apis/auth';
	import { getWallet, getListBrokerageRecord } from '@/apis/withdraw';
	import { pennyToDollarFormat, dateTimeFormat } from '@/utils/format';
	import { useGetDataPaging } from '@/hooks/paging';

	const wallet = ref<AnyObj>({});
	const brokerageInfo = ref<AnyObj>({});



	const { list, refresh, tolower, end } = useGetDataPaging({
		api: getListBrokerageRecord,
		params: () => {
			return {}
		}
	})

	function loadData() {
		wallet.value = {};
		brokerageInfo.value = {};

		getWallet().then(res => {
			wallet.value = res.data ?? {};
		});
		getBrokerageInfo().then((res) => {
			brokerageInfo.value = res.data ?? {}
		});
	}

	onLoad(() => {
		loadData();
		refresh();
	});

	onPullDownRefresh(() => {
		loadData();
		refresh();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500)
	});
</script>

<style lang="scss">
	.finance-card {
		margin-top: 50rpx;
		padding: 0 34rpx;
		width: 685rpx;
		height: 294rpx;
		flex-shrink: 0;
		border-radius: 16rpx;
		// background: linear-gradient(90deg, #FF710A 0%, #FF7008 100%);

		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 685rpx;
			height: 294rpx;
		}

		&__header {
			padding-top: 52rpx;
			color: #ffffff;
			font-size: 26rpx;
			font-weight: 500;
		}

		&__total-revenue {
			padding-top: 11rpx;
			color: #ffffff;
			font-size: 72rpx;
			// line-height: 72rpx;
			font-weight: 600;
		}

		&__footer {
			margin-top: 40rpx;
			color: #ffffff;
			font-size: 26rpx;
			font-weight: 400;
		}
	}

	.revenue-record {
		width: 688.34rpx;
		height: 188rpx;
		padding: 48rpx 0 40rpx 0;
		border-top: 1px solid #dde4f170;


		&__image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
		}

		&__info {
			width: 420rpx;
			padding: 3rpx 0;
			margin-left: 28rpx;

			view {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
			}

			text {
				color: #737d91;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		&__money {
			position: absolute;
			right: 0;
			z-index: 11;
			color: #ff710a;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>